<template>
  <div class="mask-container" v-if="showMask" @touchmove.stop.prevent="">
    <div class="content-container">
      <div class="top-box">
        <div class="left-step">
          <div class="step-desc">
            <span>第{{ stepNumber === 1 ? "一" : "二" }}步</span>
            <span>共2步</span>
          </div>
          <div class="step-tip">
            <span class="tip-active"></span>
            <span :class="{ 'tip-active': stepNumber == 2 }"></span>
          </div>
        </div>
        <img
          @click="closeClick"
          class="img-close"
          :src="require('../assets/home/icon_close_black.png')"
          alt=""
        />
      </div>
      <div class="exchange-container">
        <div class="card-item">
          <div class="card-title">{{ "13000" }}</div>
          <div class="card-score">移动积分</div>
        </div>
        <img
          class="img-exchange"
          :src="require('../assets/home/icon_exchange.png')"
          alt=""
        />
        <div class="card-item">
          <div>{{ "3800" }}</div>
          <div>畅游积分</div>
        </div>
      </div>
      <div class="code-container">
        <div class="code-title">验证码已发送至</div>
        <div class="send-box">
          <div class="phone-box">
            {{ "132****1231" }}
          </div>
          <div class="timer-box">
            {{ timerString ? timerString + "s" : "" }}
          </div>
        </div>
        <VerifyCode />
      </div>
      <div class="btn-box">
        <Button v-if="stepNumber === 1" title="下一步" @btnClick="btnNext" />
        <Button v-else title="确认" @btnClick="btnConfirm" />
      </div>
    </div>
  </div>
</template>

<script>
import VerifyCode from "../components/VerifyCode.vue";
import Button from "../components/Button.vue";
export default {
  name: "StepMask",
  components: {
    VerifyCode,
    Button,
  },
  props: {
    showMask: Boolean,
  },
  data() {
    return {
      stepNumber: 1,
      timerString: "34",
    };
  },
  methods: {
    closeClick() {
      this.$emit("closeMask");
    },
    btnNext() {
      this.countDown();
    },
    btnConfirm() {
      // this.countDown();
      this.$router.push({
        path: "/result",
        query: {
          isSuccess: Math.random() > 0.5 ? 1 : 0,
        },
      });
    },
    countDown() {
      if (this.timer != null) return;
      let i = 2;
      this.timerString = i + "";
      this.timer = setInterval(() => {
        i--;
        this.timerString = i + "";
        if (i < 0) {
          this.timerString = "";
          this.stepNumber = 2;
          clearInterval(this.timer);
        }
      }, 1000);
    },
  },
};
</script>
<style lang="scss" scoped>
.mask-container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba($color: #000000, $alpha: 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 13px;
  .content-container {
    width: 100%;
    box-sizing: border-box;
    padding: 15px;
    background-color: #fff;
    border-radius: 5px;
    .top-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left-step {
        .step-desc {
          span:nth-child(1) {
            font-size: 15px;
            color: #333;
            margin-right: 10px;
          }
          span:nth-child(2) {
            font-size: 12px;
            color: #999;
          }
        }
        .step-tip {
          margin-top: 5px;
          display: flex;
          align-items: center;
          span {
            background-color: #ccc;
            width: 40px;
            height: 5px;
            margin-right: 10px;
            border-radius: 2.5px;
            &.tip-active {
              background-color: #ff7700;
            }
          }
        }
      }
      .img-close {
        width: 24px;
        height: 24px;
        margin-top: -5px;
      }
    }
    .exchange-container {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .card-item {
        background-color: #fff;
        width: 42%;
        padding: 10px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        border-radius: 5px;
        border: 1px solid transparent;
        box-shadow: 1px 2px 3px 3px #eee;
        color: #ff7700;
        div:nth-child(1) {
          font-size: 18px;
          font-weight: bold;
        }
        div:nth-child(2) {
          font-size: 12px;
        }
      }
      .img-exchange {
        width: 32px;
        height: 32px;
      }
    }
    .code-container {
      margin-top: 20px;
      .code-title {
        color: #333;
        font-size: 14px;
      }
      .send-box {
        margin-top: 5px;
        margin-bottom: 18px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .phone-box {
          color: #333;
          font-weight: bold;
          font-size: 19px;
        }
        .timer-box {
          color: #ff7700;
          font-size: 14px;
        }
      }
    }
    .btn-box {
      margin-top: 25px;
      margin-bottom: 20px;
      padding: 0 20px;
      box-sizing: border-box;
      width: 100%;
    }
  }
}
</style>
